<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店长推荐</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">

    <style>
        /*.fenge{*/
        /*    border-color: rgba(3, 51, 51, 0.25) !important;*/
        /*}*/
        .layui-table-cell {
            height: 150px;
            line-height: 150px;
        }
        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }
        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }
        .qq{
            content: "";
            width: 150px;
            height: 150px;
            display: inline-block;
            vertical-align: middle;
            background-size: 100%;

        }
        .layui-table img {
            max-width: 150px!important;
        }

        .layui-form-label{
            background-color: #f0f0f0!important;

        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" id="form-search" >
    <fieldset class="table-search-fieldset">
        <legend>
            搜索条件
        </legend>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">优品推荐</label>
                <div class="layui-input-inline">
                    <select name="recommend" id="recommend" lay-filter="recommend">
                        <option value="">点击进行选择</option>
                        <option value="1000">性能定制机</option>
                        <option value="3000">中配定制机</option>
                        <option value="6000">高配定制机</option>
                        <option value="8000">至尊定制机</option>
                        <option value="10000">万元神机</option>
                    </select>
                </div>



                <div class="layui-inline">
                    <label class="layui-form-label">价格区间</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="minPrice" id="minPrice" autocomplete="off" class="layui-input" >
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="maxPrice" id="maxPrice" autocomplete="off" class="layui-input" >
                    </div>
                </div>

            <div class="layui-inline" style="margin-left: 1000px">
                <button id="btn-search" lay-submit lay-filter="bt-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius  layui-btn-primary">
                    <i class="layui-icon layui-icon-fonts-clear"></i>
                    重置
                </button>
            </div>
        </div>
    </fieldset>

</form>



<table id="table-suit" lay-filter="table-suit-filter"></table>

<script type="text/html" id="table-act-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加推荐</button>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">批量删除</a>
    </div>
</script>
<script type="text/html" id="col-act-toolbar">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script type="text/html" id="imgtmp">
    <div class="qq"></div>
</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    var ctxPath = [[@{/}]];

        layui.use(['laydate','table','form','element'], function() {
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery

            form.on('select(recommend)', function (data) {
            num = data.value;
                recommend = data.elem[data.elem.selectedIndex].text;
                form.render('select');

                console.log(num);
                $('#minPrice').val(num);
                $('#maxPrice').val(parseInt(num) + 2000);
        })




            // 监听查询
            form.on('submit(bt-search-filter)', function (data) {

                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                // 刷新表格
                table.reload('table-suit', {
                    where: { //设定异步数据接口的额外参数，任意设
                        minPrice: data.field.minPrice,
                        maxPrice: data.field.maxPrice,
                        //…
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });




            //员工列表表格渲染
            table.render({
                elem: '#table-suit'
                , url: ctxPath + 'suit/list' //数据接口
                , page: true //开启分页
                , toolbar: "#table-act-toolbar"
                , limits: [10, 20, 30, 50, 100]
                , limit: 5
                , cols: [[ //表头
                    {type: "checkbox",width: 60},
                    {field: 'id', title: '编号', sort: true, align: 'center',hide: 'ture'}
                    , {field: 'img', title: '整机', align: 'center', width: 200, templet: function(d) {
                            return '<div class="qq" ><img src="upload/' + d.img + '" /></div>'
                        }
                    }
                    , {field: 'sheet', title: '配置单', align: 'center', width: 500}
                    , {field: 'discount', title: '优惠', align: 'center'}
                    , {field: 'game', title: '游戏性能', align: 'center'}
                    , {field: 'work', title: '办公性能', align: 'center'}
                    , {field: 'price', title: '价格', align: 'center'}
                    , {field: 'record', title: '备注', align: 'center'}
                    , {title: '操作', width: 150, toolbar: '#col-act-toolbar', align: 'center'}
                ]]
            });


            // 表格头部工具栏监听
            table.on('toolbar(table-suit-filter)', function (obj) {
                if (obj.event == 'add') {
                    layer.open({
                        type: 2,
                        title: "新增推荐",
                        area: ['100%', '100%'],
                        shadeClose: false,
                        content: ctxPath + 'suit/add/ui'
                    });
                } else if (obj.event == 'delete') {
                    var checkStatus = table.checkStatus('table-suit'); //idTest 即为基础参数 id 对应的值
                    var idArr = new Array();
                    // 如果没有选中任何数据
                    if (checkStatus.data.length == 0) {
                        layer.alert('你没有选中任何数据', {icon: 2, anim: 6, title: "警告"});
                        return false;
                    }

                    $(checkStatus.data).each(function (){
                        idArr.push(this.id);
                    })


                    layer.confirm('您确认删除选中记录？', {icon: 3, title: '删除确认'}, function (index) {
                        // 异步请求删除数据,结果提示，刷新表格

                        let url = ctxPath + "suit/" + idArr.join(",");
                        var params = {
                            _method: "DELETE"
                        }


                        $.post(url, params, function (response) {

                            if (response.code == 0) {
                                layer.msg(response.message, {icon: 1});
                                refreshTable();
                            } else {
                                layer.alert(response.message, {icon: 2, anim: 6});
                            }

                        })

                        layer.close(index);
                    });

                }

            });

            // 监听操作列
            table.on('tool(table-suit-filter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent == 'del') {
                    layer.confirm('您确认删除该推荐吗: ' + data.sheet + " ? ", {icon: 3, title: '删除确认'}, function (index) {
                        // 异步请求删除数据,结果提示，刷新表格

                        let url = ctxPath + "suit/" + data.id;
                        var params = {
                            _method: "DELETE"
                        }


                        $.post(url, params, function (response) {

                            if (response.code == 0) {
                                layer.msg(response.message, {icon: 1});
                                refreshTable();
                            } else {
                                layer.alert(response.message, {icon: 2, anim: 6});
                            }

                        });

                        setTimeout('window.location.reload()',0);
                    });


                } else if (layEvent == 'edit') {
                    layer.open({
                        type: 2,
                        title: "修改推荐内容",
                        area: ['100%', '100%'],
                        shadeClose: false,

                        content: ctxPath + 'suit/' + data.id
                    });

                }


            });

        });
</script>
</script>
</body>
</html>